<!-- Chat.vue -->
<template>
    <div class="chat-container">
        <div class="chat-history" ref="scrollRef">
            <Maessage v-for="(item, index) in chatHistory" :key="index" :chatMessage="item" />
            <NewMsg :currentResponse="currentResponse" :isLoading="isLoading" />
        </div>
        <div class="send">
            <el-form class="input-container">
                <el-input v-model="userInput" autosize type="textarea" @keyup.enter="handleEnter"
                    placeholder="请输入对话...(shift+enter键可换行)" />
                <el-button :type="!isLoading ? 'primary' : 'danger'" @click="handlePrimary"
                    :title="!isLoading ? '发送' : '停止生成'">
                    <el-icon>
                        <IconEpPromotion v-if="!isLoading" />
                        <IconEpVideoPause v-else />
                    </el-icon>
                </el-button>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useChatService } from '@/ollama/index';
import { ElMessage } from 'element-plus'
import Maessage from '@/components/chat/message.vue'
import NewMsg from '@/components/chat/newMsg.vue'
import { useScroll } from '@/hooks/useScroll'
import { debounce } from '@/utils/debounce'


const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()

const { chatHistory, isLoading, currentResponse, chat, stopChat } = useChatService();
const userInput = ref<string>('');


async function sendMessage(): Promise<void> {
    if (!userInput.value) {
        ElMessage({
            showClose: true,
            message: '请输入内容',
            type: 'warning',
        });
        return;
    }
    if (userInput.value.trim() && !isLoading.value) {
        const message = userInput.value;
        userInput.value = '';
        await chat(message);
    }
}
const handleEnter = (e: KeyboardEvent) => {
    if (!e.ctrlKey && !e.shiftKey) {
        sendMessage();
        scrollToBottom()
    }
}

const handlePrimary = () => {
    if (currentResponse.value) {
        stopChat()
        return;
    }
    sendMessage();
}

watch(() => currentResponse.value, debounce(scrollToBottom, 100))

onMounted(() => {
    scrollToBottom()
})
</script>

<style scoped lang="scss">
@import '@/assets/mixin.scss';

.chat-container {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 16px;
    gap: 10px;

    .chat-history {
        flex: 1;
        overflow-y: auto;
        @include scrollbar;
    }

    .input-container {
        display: flex;
        gap: 5px;
        align-items: flex-end;
    }

    .el-textarea {
        :deep(.el-textarea__inner) {
            min-height: none !important;
            max-height: 200px;
            background-color: transparent !important;
            resize: none;
            border-color: var(--color-border) !important;

            &::-webkit-scrollbar {
                width: 4px;
                height: 6px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 3px;
                -moz-border-radius: 3px;
                -webkit-border-radius: 3px;
                background-color: #c3c3c3;
            }

            &::-webkit-scrollbar-track {
                background-color: transparent;
            }
        }
    }

}
</style>